<template>
  <div class="useGuide" ref="useGuideRef">
    <!-- 标题区域 -->
    <van-sticky ref="stickyRef">
      <header-component :title="data.title" :showPre="true" :show-add="false" :titleSlide="titleSlide">
        <template #operate>
          <van-search
              v-model="data.wordKey"
              clearable
              background="#efefeff2"
              placeholder="快速查找"
          />
        </template>
      </header-component>
    </van-sticky>
    <!-- 主体内容区 -->
    <section>
      <!-- 入门 -->
      <CompactCard :title="data.thresholdTitle" :titleSpanBgColor="data.thresholdColor" :content="data.thresholdData"></CompactCard>

      <!-- 常用流程 -->
      <CompactCard :title="data.processesTitle" :titleSpanBgColor="data.processesColor" :content="data.processesData"></CompactCard>

      <!-- 推荐技巧 -->
      <CompactCard :title="data.skillTitle" :titleSpanBgColor="data.skillColor" :content="data.skillData"></CompactCard>

      <!-- 达成目标 -->
      <CompactCard :title="data.goalTitle" :titleSpanBgColor="data.goalColor" :content="data.goalData"></CompactCard>

      <!-- 深入了解 -->
      <CompactCard :title="data.understandTitle" :titleSpanBgColor="data.understandColor" :content="data.understandData"></CompactCard>
    </section>

  </div>
</template>

<script>
export default { name: "home" };
</script>

<script setup>
import CompactCard from "@/components/card/compactCard.vue";
import HeaderComponent from "@/components/header/index.vue";
import TagList from '@/components/list/tagList.vue'
import { ref, reactive, watch } from "vue";
import {useScrollWatch,useScrollWatch2} from "@/hooks/userScrollWatch.js";

const data = new reactive({
  // title
  title: 'YBox使用指南',
  wordKey: '',
  thresholdTitle: '入门',
  thresholdColor: '#2e45e9',
  thresholdData:[
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '欢迎使用YBox',
      articleContent: '了解YBox以及基本功能',
      tags: [],
      source: '',
    }
  ],

  processesTitle:'常用流程',
  processesColor: '#e06e4a',
  processesData:[
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '高效收集',
      articleContent: '让内容高效汇于一处，方便整理和管理',
      tags: [],
      source: '',
    },
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '随时阅读',
      articleContent: '专注的阅读解析后的文章正文，图片语音还能自动转文字',
      tags: [],
      source: '',
    },
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '记录阅读的想法',
      articleContent: '通过【标注】功能高亮重点并记录想法，让信息内化成为知识',
      tags: [],
      source: '',
    },
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '保持井井有条',
      articleContent: '灵活分类，自动整理，批量操作……',
      tags: [],
      source: '',
    },
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '随时找到所需',
      articleContent: '通过无处不在的快速查找和全文深度搜索，随时找到所需内容',
      tags: [],
      source: '',
    },
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '回顾重要内容',
      articleContent: '通过小组件和提醒等功能，加深知识映像',
      tags: [],
      source: '',
    }
  ],

  skillTitle:'推荐技巧',
  skillColor: '#59a189',
  skillData:[
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '自定义YBox',
      articleContent: '了解最常用的偏好设置项，融入你的使用习惯',
      tags: [],
      source: '',
    },
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '分享和导出',
      articleContent: '通过图片、连接自由分享阅读感悟和见解，或自定导出数据至其他工具',
      tags: [],
      source: '',
    },
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '快捷指令和API',
      articleContent: '创建自动化流程提高效率，收藏API满足更多信息收集场景',
      tags: [],
      source: '',
    }
  ],

  goalTitle:'达成目标',
  goalColor: '#e4b253',
  goalData:[
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '打造知识参考库',
      articleContent: '借助无门槛的信息处理流程，任何人都可以轻松搭建私人信息参考库、阅读器、知识库。',
      tags: [],
      source: '',
    }
  ],

  understandTitle:'达成目标',
  understandColor: '#7869ea',
  understandData:[
    {
      id: '1',
      images: 'https://bs.zhxu.cn/logo.png',
      articleTitle: '查看完整帮助文档',
      articleContent: '通过help.ybox.pro查看完整的帮助文档',
      tags: [],
      source: '',
    }
  ],
})
// 标题动画相关的操作
const useGuideRef = ref();
const stickyRef = ref();

let titleSlide = useScrollWatch(useGuideRef)
useScrollWatch2(titleSlide,stickyRef)
</script>

<style lang="less" scoped>

.useGuide {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 160px;
  section{
    padding: 0 12px;
    position: relative;
    top: 60px;
  }
}
.useGuide::-webkit-scrollbar {
  display: none;/*隐藏滚动条*/
}

</style>
